window.addEventListener('load',function(){
    var first = document.querySelector('.first');
    var list = first.querySelectorAll('li');
    var small = document.querySelector('.small');
    var num = 0;
    /* 给图片添加id */
    var idName = [];
    for(var i = 0;i < list.length; i ++) {
        list[i].id = 'img' + (i + 1);
        idName.push(list[i].id);
    }
    creat(list,small);
    setInterval(leftMove,2000);
    /* 动态生成小圆圈 */
    function creat(picture,where) {
        var fragment = document.createDocumentFragment();
        for(var i = 0;i < picture.length ;i ++) {
            var Lis = document.createElement('li');
            Lis.setAttribute('index',i);
            fragment.appendChild(Lis);
        }
        where.appendChild(fragment);
    }
    function leftMove() {
    var cnt = idName.length - 1;
        /* 改变图片id */
        idName.unshift(idName[cnt]);
        idName.pop();
        /* 重新赋值 */
        for(var i = 0;i < idName.length; i ++) {
            list[i].id = idName[i];
        }
        num++;
        if(num == 6){
            num = 0;
        }
        sight();
    }
    function rightMove() {
        idName.push(idName[0]);
        idName.shift();
        for(var i = 0;i < idName.length; i ++) {
            list[i].id = idName[i];
        }
        num--;
        if(num == -1){
            num = 5;
        }
        sight();
    }
    /* 鼠标移入 */
    for(var i = 0;i < list.length;i ++) {
        (function(i){
            list[i].onmouseenter = function() {
                list[i].style.backgroundColor = '#0f9cf5';
                list[i].style.border = '2px solid #0f9cf5';
            }
            list[i].onmouseleave = function() {
                list[i].style.backgroundColor = '';
                list[i].style.border = '';
            }
        }(i))
    }
    /* 点击小圆圈 */
    small.addEventListener('click',change);
    function change(e) {
        var click = e.target.getAttribute('index');
        var now = idName.indexOf('img1');
        var length = Math.max(click,now) - Math.min(click,now);
        if(click > now) {
            while(length--) {
                leftMove();
            }
        }else {
            while(length--) {
                rightMove();
            }
        }

    }

    /* 小圆圈变亮 */
    function sight() {
        var liNum = small.children.length;
        for(var i = 0;i < liNum; i++) {
            small.children[i].className = '';
        }
        small.children[num].className = 'selected';
    }
    
   /*  偷懒用js给第二个轮播图加id名 */
   var second = document.querySelector('.second');
   var secondLi = second.querySelectorAll('li');
   var seconds = document.querySelector('.seconds');
   var phoId = [];
   for(var i = 0 ;i < secondLi.length; i ++) {
       secondLi[i].id= 'photo' + (i + 1);
       phoId.push(secondLi[i].id);
   }
   creat(secondLi,seconds);
})